<!DOCTYPE html>
<html>
    <head>
		<meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
        <title>FlipTrack: Player</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
        
        <link rel="stylesheet" type="text/css" href="fonts/fonts.css" />
		<link href='http://fonts.googleapis.com/css?family=Alegreya+SC:700,400italic' rel='stylesheet' type='text/css' />
		
		<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
		
		<!-- flickering screen solution when using transitions-javascript-->
		<script type="text/javascript" charset="utf-8" src="customSolutions/flickering.js"></script>
		
		<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
		<script type="text/javascript" charset="utf-8" src="customSolutions/myMedia.js"></script>
		<!-- navigationbar control -->
		<script type="text/javascript" charset="utf-8" src="customSolutions/navBar.js"></script>
		
    
		
    </head>
    
    <body onload="onLoad()">
    <div data-role="page" id="player">
    <header data-role="header" data-position="fixed" class="headerNav">

                <!-- navigation bar -->
                <div data-role="navbar" data-iconpos="top" data-icon="star" class="navControl">
                <ul>
                		<li><a id="nav-manuel" data-rel="external" data-theme="a" data-iconpos="top" data-icon="back">Manuel control</a></li>
                		<li><a id="nav-flip" data-rel="external" data-theme="a" data-iconpos="top" data-icon="refresh">FlipTrack styring</a></li>
                </ul>
        </div> <!-- end of navigation bar -->
        </header> <!--  end header -->
    
    	<!-- PlayerContent MANUEL -->
    	<div data-role="content" id="playerContent">
        <h1 style="text-align:center;">Manuel Styring</h1>
   		<p>
	   		<select id="playlist" onchange="updateMedia()" data-theme="a">
	        	<option value="/android_asset/www/music/Marcus.mp3">Asset</option>
	        	<option value="test.mp3">SD Card</option>
	        	<option value="http://audio.ibeat.org/content/p1rj1s/p1rj1s_-_rockGuitar.mp3">Internet</option>
	        	<option value ="/android_asset/www/music/Black.mp3">Predators-2010</option>
	   		</select>
   		</p>
   
   			<!-- counter -->
   			<div class="ui-grid-a">
            		<div class="ui-block-a" style="text-align:left;">Tid: <span id="audio_position">0 sek</span></div>
            		<div class="ui-block-b" style="text-align:right;">Total: <span id=media_dur>0</span> sek</div>
        	</div> <!-- /grid-a -->
   
   			<a href="#" onclick="playAudio()"><img id="play" src="images/play.png"></a>
   			<a href="#" onclick="stopAudio()"><img id="stop" src="images/stop.png"></a>
   		</div>
   		<!-- /counter -->
   		<!-- END PlayerContent MANUEL -->
   
   <!-- PlayerContent FLIP -->
   <div data-role="content" id="playerContent2">
        <h1 style="text-align:center;">Audio Player</h1>
        <h1 style="text-align:center;">Flip Control</h1>
            
<!--    <p id="audio_position">0.000 sec</p> -->
   <p>
	   <select id="playlist" onchange="updateMedia()" data-theme="a">
	        <option value="/android_asset/www/music/Marcus.mp3">Asset</option>
	        <option value="test.mp3">SD Card</option>
	        <option value="http://audio.ibeat.org/content/p1rj1s/p1rj1s_-_rockGuitar.mp3">Internet</option>
	        <option value ="/android_asset/www/music/Black.mp3">Predators-2010</option>
	   </select>
   </p>
   
   <!-- counter -->
   <div class="ui-grid-a">
            	<div class="ui-block-a" style="text-align:left;">Tid: <span id="audio_position">0 sek</span></div>
            	<div class="ui-block-b" style="text-align:right;">Total: <span id=media_dur>0</span> sek</div>
        	</div> <!-- /grid-a -->
   
   <a href="#" onclick="playAudio()"><img id="play" src="images/play.png"></a>
   <a href="#" onclick="stopAudio()"><img id="stop" src="images/stop.png"></a>
   </div>
   <!-- /counter -->
   <!-- END PlayerContent FLIP -->
   <div data-role="footer" class="footermain" data-id="myfootermain" data-position="fixed">
<a href="about.html" data-icon="info" data-transition="slideup" class="ui-btn-right">About</a>
                <h1>Biancoolware ®</h1>
        </div>
   
   </div>
    </body>
</html>